<template>
    <div class="recommend">
        <list class="list">
            <cell class="cell" v-for="(value, index) in recommendList">
                <section class="top"/>
                <div class="row">
                    <section class="mid-left" />
                    <section class="mid-right" :isLogoShow="false"/>
                </div>
                <div class="row">
                    <section class="bottom-left" :isLogoShow="false"/>
                    <section class="bottom-right"/>
                </div>
            </cell>
        </list>
    </div>
</template>

<style scoped>
    .recommend {

    }
    .top {
        height: 600px;
    }
    .row {
        height: 600px;
        flex-direction: row;
    }
    .mid-left {
        flex: 4;
    }
    .mid-right {
        flex: 3;
    }
    .bottom-left {
        flex: 3;
    }
    .bottom-right {
        flex: 4;
    }

</style>

<script>
    import section from '../components/section/section.vue'

    export default {
        components: { section },
        data() {
            return {
                recommendList: [0, 1, 2, 3, 4, 5]
            }
        }
    }
</script>